import React, { useEffect, useState } from 'react';
import { Button, message, Steps, theme} from 'antd';
import NewsEditor from '../../../components/news-manage/NewsEditor'
import NewsForm from '../../../components/news-manage/NewsForm'
import axios from 'axios';


const NewsAdd = (props) => {
  const { token } = theme.useToken();
  const [current, setCurrent] = useState(0);
  const [submittableMap, setSubmittableMap] = useState({});
  const [valueMap, setvalueMap] = useState({});
  const User = JSON.parse(localStorage.getItem("token"))

  const setSubmittableEvent = (idx, submittable) => {
    const newsubmittableMap = { ...submittableMap }
    newsubmittableMap[idx] = submittable
    setSubmittableMap(newsubmittableMap)
  }

  const setvalueMapEvent = (idx, values) => {
    const newvalueMap = { ...valueMap }
    newvalueMap[idx] = values
    setvalueMap(newvalueMap)
  }
  const steps = [
    {
      title: '基本信息',
      description: "新闻标题，新闻分类",
      content: <NewsForm valueMap={valueMap} setvalueMapEvent={setvalueMapEvent} setSubmittableEvent={setSubmittableEvent}></NewsForm>,
    },
    {
      title: '新闻内容',
      description: "新闻主体内容",
      subTitle: 'Left 00:00:08',
      content: <NewsEditor valueMap={valueMap} setvalueMapEvent={setvalueMapEvent} setSubmittableEvent={setSubmittableEvent} ></NewsEditor>,

    },
    {
      title: '新闻提交',
      description: "保存草稿或者提交审核",
      content: '请把你撰写的新闻保存草稿或者提交审核！',

    },
  ];

  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const items = steps.map((item) => ({
    ...item,
    key: item.title,

  }));
  const contentStyle = {
    // lineHeight: '260px',
    textAlign: 'center',
    color: token.colorTextTertiary,
    // backgroundColor: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    // border: `1px dashed ${token.colorBorder}`,
    marginTop: 16,
    paddingTop: 20,
  };
  const handleSave = (auditState) => {
    const params = {
      // "title": "jj教育",
      // "categoryId": 3,
      ...valueMap[0],
      "content": valueMap[1],
      "region": User.region ? User.region : "全球",
      "author": User.username,
      "roleId": User.roleId,
      "auditState": auditState,
      "publishState": 0,
      "createTime": Date.now(),
      "star": 0,
      "view": 0,
      // "publishTime": 0
    }
    const statusDict = {
      0: '保存草稿!',
      1: '提交审核!'
    }
    const urlDict = {
      0: '/news-manage/draft',
      1: '/audit-manage/audit'
    }
    axios.post("/news", params).then(res => {
      props.history.push(urlDict[auditState])
      message.success(statusDict[auditState])
    })

  }
  return (
    <>
      <h2>撰写新闻</h2>
      <Steps current={current} items={items} />
      <div style={contentStyle}> {steps[current].content}</div>
      <div
        style={{
          marginTop: 24,
        }}
      >
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()} disabled={!submittableMap[current]}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <>
            <Button type="primary" onClick={() => { handleSave(0) }}>
              保存草稿
            </Button>
            <Button type="primary" onClick={() => { handleSave(1) }} danger >
              提交审核
            </Button>
          </>

        )}
        {current > 0 && (
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => prev()}
          >
            Previous
          </Button>
        )}
      </div>
    </>
  );
};

export default NewsAdd;
